<div class="content">
    <div id="example_title">
        <h1>Load Data Once</h1>
        If you define the url property, then each type a new page is opened it will submit a request to the server for the new portion
        of the data. However, if you use the load() method, it will load data from the URL, but only once. The grid will think it has local
        data source and will not send any more server side requests.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 800px; height: 350px; overflow: hidden;"></div>
<br>
<button class="w2ui-btn" onclick="loadData('data/list.json')">Load Data</button>

<!--CODE-->
<script type="module">
import { w2grid } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    show: { toolbar: true, },
    method: 'GET', // need this to avoid 412 error on Safari
    columns: [
        { field: 'lname', text: 'Last Name', size: '30%', searchable: true, sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', searchable: true, sortable: true },
        { field: 'email', text: 'Email', size: '40%', searchable: true, sortable: true },
        { field: 'sdate', text: 'Start Date', size: '120px', searchable: true, sortable: true }
    ]
})

window.loadData = function(url) {
    grid.load(url)
}
</script>

<!--CODE-->

<!--CODE-->
<script type="text/json">
{
    "total": 9,
    "records": [
        { "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 3, "fname": "Jin", "lname": "Franson", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 4, "fname": "Susan", "lname": "Ottie", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 5, "fname": "Kelly", "lname": "Silver", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 6, "fname": "Francis", "lname": "Gatos", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 7, "fname": "Mark", "lname": "Welldo", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }
    ]
}
</script>
